<template>
	<view class="wrap">
		<uni-nav-bar @clickLeft="$tab.back()" :fixed="true" left-icon="left" title="订单详情" :statusBar="true"
			:border="false" background-color="#FFDDDB" />
		<view class="w-full nav flex items-center justify-between px-32" v-if="detail">
			<view class="flex flex-col">
				<text class="text-32 font-700">
					{{ orderstate }}
				</text>
				<text class="text-24 text-gray mt-16" v-if="orderstate == '退款失败'">
					{{ detail.refundVerifyRemark }}
				</text>
				<view class="flex items-center mt-16" v-if="detail.countDown > 0 && detail.state == 0">
					<text class="mr-12">剩余</text>
					<u-count-down :time="detail.countDown" format="HH:mm:ss" autoStart millisecond @change="onChange">
						<view class="flex items-center" v-if="timeData">
							<view class="">
								{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}
							</view>
							<text class="time__doc">:</text>
							<view class="">
								{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}
							</view>
							<text class="">:</text>
							<view class="">
								{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}
							</view>
						</view>
					</u-count-down>
					<text class="ml-12">后失效</text>
				</view>
			</view>
			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_daifukuan@2x.png"
				class="image-96" mode=""></image>
		</view>

		<view class="px-20">
			<!-- 收货地址 -->
			<view v-if="detail" class="flex py-24 px-16 bg-FFF mt-20 round-8 items-center">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/mine/icon_dingwei.png"
					class="image-40" mode=""></image>
				<view @click="changeAddress" v-if="address" class="ml-20">
					<view class="flex items-center">
						<text>{{ address.name }}</text>
						<text class="ml-16">{{ address.mobile }}</text>
					</view>
					<text class="mt-16">{{ address.area }}{{ address.detail }}</text>
				</view>
				<view @click="changeAddress" class="flex ml-20 items-center" v-else>
					<text class="mr-20">暂无收货地址，请添加</text>
					<u-icon name="arrow-right" color="#333" size="10"></u-icon>
				</view>
			</view>

			<!-- 商品 -->
			<view class="py-24 px-16 bg-FFF mt-20 round-8" v-if="detail">
				<view v-for="(i, index) in detail.orderSpuList" :key="index" class="p-12" :style="{
					marginTop: index === 0 ? '0' : '20rpx'
				}">
					<!-- 判断如果是有规格的 -->
					<view class="flex items-center" v-if="i.skuInfo">
						<view class="image-200">
							<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.skuInfo.icons" mode="">
							</image>
						</view>

						<view class="ml-20 flex flex-col text-32 w-full">
							<text class="u-line-2">{{ i.spuInfo.name }}</text>
							<view class="flex items-center mt-20">
								<view class="text-gray  text-20">
									{{ i.skuInfo.mallSkuSpecs[0].specName }}:{{ i.skuInfo.mallSkuSpecs[0].specValue }}
								</view>
								<view class="text-gray  text-20 ml-12" v-if="i.skuInfo.mallSkuSpecs.length == 2">
									{{ i.skuInfo.mallSkuSpecs[1].specName }}:{{ i.skuInfo.mallSkuSpecs[1].specValue }}
								</view>
							</view>
							<view class="flex justify-between mt-48 items-center w-full">
								<view class="text-E2382B">
									￥{{ i.skuInfo.price }}
								</view>
								<view>X {{ i.num }}</view>
							</view>
						</view>
					</view>
					<!-- 没规格的 -->
					<view class="flex items-center" v-else>
						<view class="image-200">
							<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.spuInfo.cover" mode="">
							</image>
						</view>

						<view class="ml-20 flex flex-col text-32 w-full">
							<text class="u-line-2">{{ i.spuInfo.name }}</text>
							<view class="flex justify-between mt-48 items-center w-full">
								<view class="text-E2382B">
									￥{{ i.spuInfo.price }}
								</view>
								<view>X {{ i.num }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex items-center py-20 px-12">
					<view class="text-nowrap">
						备注
					</view>
					<view class="ml-12 w-full">
						<u--textarea v-model="notes" placeholder="建议留言前先与客服沟通确认" autoHeight border="none"
							confirmType="done" v-if="detail.state == 0">
						</u--textarea>
						<view class="" v-else>
							{{ notes }}
						</view>
					</view>
				</view>
			</view>

			<!-- 商品折扣券 核销码 -->
			<div class="py-24 px-16 bg-FFF mt-20 round-8 text-36"
				v-if="detail && detail.state == 1 && detail.orderSpuList[0].spuInfo.columnType == 12">
				<div class="text-center text-32 font-700">
					核销码
				</div>

				<div class="mt-48 px-40">
					<scroll-view scroll-x style="white-space: nowrap;">
						<div class="flex items-center">
							<div class="flex flex-col items-center mr-48" v-for="(item, index) in detail.orderVouchers">
								<image :src="globalConfig.imagePrefix + item.qrCode" mode="" class="image-144"
									@click="showQrCode(globalConfig.imagePrefix + item.qrCode)"></image>
								<div class="mt-16">
									{{ item.name }}
								</div>
							</div>
						</div>
					</scroll-view>
				</div>
			</div>

			<!-- 店铺线下 核销码 -->
			<div class="py-24 px-16 bg-FFF mt-20 round-8 text-36"
				v-if="detail && detail.state == 5 && detail.writeOffQrCode && !isStore">
				<div class="text-center text-32 font-700">
					核销码
				</div>
				<div class="flex justify-around my-48">
					<image :src="globalConfig.imagePrefix + detail.writeOffQrCode" mode=""
						style="width: 240rpx; height: 240rpx;"
						@click="showQrCode(globalConfig.imagePrefix + detail.writeOffQrCode)"></image>
				</div>
			</div>

			<!-- 支付方式 -->
			<view class="py-24 px-16 bg-FFF mt-20 round-8 text-36" v-if="detail && detail.state == 0">
				<view class="">
					支付方式
				</view>
				<view class="flex justify-between items-center py-24" @click="changePayment(index)"
					v-for="(item, index) in payList" :key="index"
					:style="{ borderBottom: index < payList.length - 1 ? '2rpx solid #F0F0F0' : '' }" v-if="item.show">
					<view class="flex items-center">
						<image :src="item.img" class="image-40" mode="" v-if="item.img"></image>
						<text class="ml-12">
							{{ item.name }}
						</text>
					</view>
					<view class="flex justify-around items-center select-box"
						:class="payIndex == index ? 'selected' : ''">
						<u-icon name="checkbox-mark" color="#fff" size="10"></u-icon>
					</view>
				</view>


				<div class="remittanceInfo" v-if="bankInfo && (payList[payIndex].payway == 9)">
					<div class="flex align-center justify-between">
						<div class="">汇款信息</div>
					</div>
					<div class="flex align-center justify-between mt-24">
						<div class="" style="color: #999999;">收款人</div>
						<div class="flex items-center">
							<div class="">
								{{ bankInfo.realName }}
							</div>
							<u-icon name="file-text" color="#fb4235" :bold="true"
								@click="copy(bankInfo.realName)"></u-icon>
						</div>
					</div>
					<div class="flex align-center justify-between mt-24">
						<div class="" style="color: #999999;">收款账号</div>
						<div class="flex items-center">
							<div class="">
								{{ bankInfo.cardNo }}
							</div>
							<u-icon name="file-text" color="#fb4235" :bold="true"
								@click="copy(bankInfo.cardNo)"></u-icon>
						</div>
					</div>
					<div class="flex align-center justify-between mt-24">
						<div class="" style="color: #999999;">开户行</div>
						<div class="flex items-center">
							<div class="">
								{{ bankInfo.openBank }}
							</div>
							<u-icon name="file-text" color="#fb4235" :bold="true"
								@click="copy(bankInfo.openBank)"></u-icon>
						</div>
					</div>
					<div class="flex align-center justify-between mt-24">
						<div class="" style="color: #999999;">转账金额</div>
						<div class="flex items-center">
							<div class="">
								{{ detail.totalPrice }}
							</div>
							<u-icon name="file-text" color="#fb4235" :bold="true"
								@click="copy(detail.totalPrice)"></u-icon>
						</div>
					</div>
				</div>

				<div class="remittanceInfo mt-24" v-if="bankInfo && (payList[payIndex].payway == 9)">
					<div class="flex align-center justify-between">
						<div class="">上传支付凭证</div>
					</div>
					<div class="mt-24">
						<u-upload :fileList="paymentList" @afterRead="productAfterRead" @delete="productDeletePic"
							name="payment" :maxCount="1"></u-upload>
					</div>
				</div>
			</view>

			<!-- 共计 -->
			<view class="py-24 px-16 bg-FFF mt-20 round-8 text-36" v-if="detail">
				<view class="flex justify-between ">
					<text>共计</text>
					<text>{{ detail.orderSpuList.length }}件商品</text>
				</view>
				<u-divider></u-divider>
				<div class=""
					v-if="detail.orderSpuList[0].spuInfo.columnType != 13 && detail.orderSpuList[0].spuInfo.columnType != 3">
					<view class="flex justify-between">
						<text>消费金</text>
						<text style="color: #E95E03;">{{ detail.xiaofeijinPrice }}</text>
					</view>
					<u-divider></u-divider>
					<view class="flex justify-between">
						<text>余额支付百分比</text>
						<text style="color: #E95E03;">{{ detail.orderSpuList[0].spuInfo.balanceRateStr }}</text>
					</view>
					<u-divider></u-divider>
				</div>
				<view class="flex justify-between ">
					<text>总价</text>
					<text class="text-E2382B">{{ detail.totalPrice }}</text>
				</view>
				<u-divider></u-divider>
				<view class="flex justify-between">
					<text>订单编号</text>
					<text>{{ detail.orderNo }}</text>
				</view>
				<u-divider></u-divider>
				<view class="flex justify-between" style="padding: 20rpx 0;">
					<text>下单时间</text>
					<text class="text-E2382B">{{ detail.createTime }}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="confirm-wrap flex py-20 bg-FFF" v-if="detail && !isStore">
			<view v-if="detail.state == 0" class="but" @click="cancel">
				取消订单
			</view>
			<view
				v-if="(detail.state == 1 || detail.state == 2 || detail.state == 5) && detail.orderSpuList[0].spuInfo.columnType == 3"
				class="but" @click="refund">
				退款
			</view>
			<view v-if="detail.state == 0 && detail.type != 2" class="but" @click="changeAddress">
				{{ address ? '修改' : '新增' }}地址
			</view>
			<view v-if="detail.state == 0" class="but text-FFF" @click="getAppPay" style="background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
	">
				去付款
			</view>
			<view v-if="detail.state == 2" class="but text-FFF" @click="order_Edit" style="background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
	">
				确认收货
			</view>
			<view v-if="detail.state == 2 || detail.state == 3" class="but" @click="seelogistics">
				查看物流
			</view>
			<view v-if="detail.state == 4" class="but" @click="deleteOrder">
				删除订单
			</view>
		</view>

		<view class="confirm-wrap flex py-20 bg-FFF" v-if="detail && (detail.state == 5) && isStore">
			<view v-if="detail.state == 5" class="but text-FFF" @click="writeOffConfirm" style="background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		">
				核销
			</view>
		</view>

		<view style="width: 100%;height: 200rpx;"></view>

		<!-- 支付密码 -->
		<u-popup :show="pay_password" @close="pay_password = false, payPassword = ''" mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(), pay_password = false">
					确认
				</view>
			</view>
		</u-popup>

		<!-- 物流 -->
		<u-popup :show="isLogistics" @close="isLogistics = false, wlInfo = {}" mode="center" round="16"
			:closeable="true">
			<logistics :wlInfo="wlInfo"></logistics>
		</u-popup>

		<!-- 红包动画 -->
		<u-popup :show="redEnvelopeShow" @close="handleRedClose" mode="center" round="16" bgColor="transparent">
			<view class="redEnvelope-wrap relative" @click="handleRedClose">
				<view class="flex flex-col items-center redEnvelope-content">
					<view class="redEnvelope-title text-32 font-500">
						金积分到账
					</view>
					<view class="redEnvelope-price" v-if="payAmountInfo">
						{{ payAmountInfo.cashPayAmountInfo.zhuan.jinjifen }}
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/kai@2x.png" class="kai"
						:class="{
							'kai-animation': redEnvelopeAnimation
						}" mode=""></image>
				</view>
			</view>
		</u-popup>

		<!-- 红包动画 -->
		<u-popup :show="redEnvelopeEndShow" mode="center" round="16" bgColor="transparent">
			<view class="redEnvelope-wrap-end">

			</view>
		</u-popup>

		<!-- 本地生活支付 -->
		<u-popup :show="payMode" mode="center" round="16" @close="payMode = false" :closeable="true">
			<view class="p-32" style="width: 667rpx;">
				<view class="text-center">
					支付模式
				</view>
				<view class="mt-32">
					<view class="flex justify-between items-center py-24" @click="payModeIndex = index"
						v-for="(item, index) in payModeList" :key="index"
						:style="{ borderBottom: index < payModeList.length - 1 ? '2rpx solid #F0F0F0' : '' }">
						<view class="flex items-center">
							<text class="ml-12">
								{{ item.name }}
							</text>
						</view>
						<view class="flex justify-around items-center select-box"
							:class="payModeIndex == index ? 'selected' : ''">
							<u-icon name="checkbox-mark" color="#fff" size="10"></u-icon>
						</view>
					</view>
				</view>
				<view class="mt-48 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="storePay">
					确认
				</view>
			</view>
		</u-popup>

		<u-popup :show="hexiaoShow" @close="hexiaoShow = false" mode="center">
			<div class="py-24 px-16 bg-FFF mt-20 round-8 text-36"
				v-if="detail && detail.state == 5 && detail.writeOffQrCode && !isStore">
				<div class="text-center text-32 font-700">
					核销码
				</div>
				<div class="flex justify-around my-48">
					<image :src="globalConfig.imagePrefix + detail.writeOffQrCode" mode=""
						style="width: 440rpx; height: 440rpx;"
						@click="showQrCode(globalConfig.imagePrefix + detail.writeOffQrCode)"></image>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
import {
	throttle
} from 'throttle-debounce';
var thro;
export default {
	components: {
		logistics
	},
	data() {
		return {
			id: null, //订单id
			detail: null, //订单详情
			timeData: null, //待支付订单倒计时
			address: null, //地址
			isStore: false, //是否是商家
			hexiaoShow: false,
			notes: "", //备注
			payList: [
				// payway 4为货币支付 10 微信app11 微信小程序12 支付宝
				// payType 0 微信小程序 1微信app 2支付宝app 3 货币 4 银行卡 5予集支付
				// #ifdef MP-WEIXIN
				{
					name: "予集支付",
					payway: 16,
					show: true,
					payType: 5
				},
				{
					name: "微信+消费金",
					payway: 0,
					show: true,
					payType: 0
				},
				{
					name: `余额+微信+消费金`,
					payway: 8,
					show: false,
					payType: 0
				},
				{
					name: `余额+消费金+微信〔需支付10%现金手续费〕`,
					payway: 8,
					show: false,
					payType: 0
				},
				// #endif

				// #ifndef MP-WEIXIN
				{
					name: "予集支付",
					payway: 1,
					show: true,
					payType: 5
				},
				{
					name: "微信+消费金",
					payway: 1,
					show: true,
					payType: 1
				},
				{
					name: "余额+微信+消费金",
					payway: 6,
					show: false,
					payType: 1
				},
				{
					name: "余额+消费金+微信〔需支付10%现金手续费〕",
					payway: 6,
					show: false,
					payType: 1
				},

				{
					name: "余额+支付宝+消费金",
					payway: 7,
					show: false,
					payType: 2
				},
				{
					name: "余额+消费金+支付宝〔需支付10%现金手续费〕",
					payway: 7,
					show: false,
					payType: 2
				},
				// #endif
				{
					name: "支付宝+消费金",
					payway: 2,
					show: true,
					payType: 2
				},
				{
					name: "余额+消费金",
					payway: 3,
					show: false,
					payType: 3
				},
				{
					name: "金积分",
					payway: 4,
					show: false,
					payType: 3
				},
				{
					name: "功德金",
					payway: 4,
					show: false,
					payType: 3
				},
				{
					name: "金豆+消费金",
					payway: 4,
					show: false,
					payType: 3
				},
				{
					name: `银行卡支付`,
					payway: 9,
					show: false,
					payType: 4
				},
				{
					name: `微信+熵豆`,
					payway: 10,
					show: false,
					payType: 1
				},
				{
					name: `支付宝+熵豆`,
					payway: 12,
					show: false,
					payType: 2
				},
				{
					name: `余额+熵豆`,
					payway: 13,
					show: false,
					payType: 3
				},
				{
					name: `熵豆`,
					payway: 14,
					show: false,
					payType: 3
				},
				{
					name: `余额+支付宝+熵豆`,
					payway: 15,
					show: false,
					payType: 2
				},
			], //支付方式
			payIndex: 0, //支付选中下标
			pay_password: false,
			payPassword: '',
			isLogistics: false, //物流
			wlInfo: null,
			form: {
				id: '',
				expressnum: '',
				logistics: '',
				status: '',
			},
			sendOut_show: false,
			globalConfig: getApp().globalData.config,

			redEnvelopeShow: false,
			redEnvelopeValue: [],
			redEnvalopeIndex: 1,
			redEnvelopeEndShow: false,
			redEnvelopeAnimation: false,

			payMode: false,
			payModeList: [],
			payModeIndex: 0,
			payAmountInfo: null,

			bankInfo: null,
			paymentList: [],
			paymentUrl: ''
		};
	},
	onLoad(e) {
		thro = this
		thro.id = e.id
		thro.getDetail()
		thro.getData()

		if (e.store) {
			this.isStore = true
		}
	},
	onShow() {
		// 监听选择地址
		uni.$on('updateData', (data) => {
			thro.address = JSON.parse(JSON.stringify(data))
			thro.$Api.index.updateOrderAddress({
				orderNo: thro.id,
				addressId: thro.address.id
			}).then(() => {
				uni.$off('updateData')
				thro.getDetail()
			})
		})
	},
	computed: {
		orderstate() {
			let value = ''
			if (thro.detail.orderSpuList[0].spuInfo.columnType == 12) {
				thro.globalConfig.appConfig.dikouList.forEach(item => {
					if (thro.detail && thro.detail.state == item.status) {
						value = item.name
					}
				})
			} else {
				thro.globalConfig.appConfig.orderStatusList.forEach(item => {
					if (thro.detail && thro.detail.state == item.status) {
						value = item.name
					}
				})
			}
			return value
		}
	},
	methods: {
		writeOffConfirm: throttle(2000, async () => {
			const res = await thro.$Api.index.orderVerification({
				orderNo: thro.id
			})
			thro.$modal.msg('核销成功!')
			thro.getDetail()
		}, {
			noTrailing: true
		}),
		showQrCode(url) {
			uni.previewImage({
				urls: [url]
			})
		},
		// 支付凭证姗迟
		productDeletePic(event) {
			switch (event.name) {
				case "payment":
					thro.paymentList.splice(event.index, 1)
					thro.paymentUrl = ""
					break
			}
		},
		// 支付凭证上传
		async productAfterRead(event) {
			thro.$Api.common.uploadFile(event.file.url).then(res => {
				switch (event.name) {
					case "payment":
						thro.paymentList.push({
							url: res.url
						})
						thro.paymentUrl = res.fileName
						break
				}
			})
		},
		//商家确认发货
		sendOutGoods(id) {
			thro.form.id = id
			thro.form.status = 4
			thro.sendOut_show = true
		},
		// 退款
		async refund() {
			thro.$modal.confirm('确认退款吗').then(async (con) => {
				if (con) {
					const res = await thro.$Api.index.refund({
						orderNo: thro.detail.orderNo
					})
					thro.getDetail()
				}
			})
		},
		// 查物流
		seelogistics: throttle(2000, async () => {
			const res = await thro.$Api.store.mallOrderLogistics({
				orderNo: thro.detail.orderNo //订单号
			})
			let tem = res.data.data
			let obj = {}
			obj.logo = tem.expressCompanyLogo
			obj.post_name = tem.expressCompanyName
			obj.exp_phone = tem.number
			obj.post_no = res.data.taskNo
			obj.addr = tem.theLastMessage
			obj.list = tem.logisticsTraceDetails.map(i => {
				i.location = i.areaName
				i.context = i.desc
				i.timeArr = [
					uni.$u.timeFormat((new Date(i.time)).getTime(), 'yyyy-mm-dd'),
					uni.$u.timeFormat((new Date(i.time)).getTime(), 'hh:mm:ss')
				]
				return i
			})

			thro.wlInfo = obj
			thro.isLogistics = true
		}, {
			noTrailing: true
		}),
		// 删除订单
		deleteOrder: throttle(2000, () => {
			thro.$Api.index.appOrdersDelete({
				orderNo: thro.detail.orderNo,
			}).then((res) => {
				uni.$u.toast('删除成功')
				thro.$tab.back(1500)
			})
		}, {
			noTrailing: true
		}),
		// 取消订单
		cancel: throttle(2000, () => {
			thro.$Api.index.mallOrderCancel({
				orderNo: thro.detail.orderNo,
			}).then((res) => {
				uni.$u.toast('取消成功')
				setTimeout(() => {
					thro.getDetail()
				}, 1500)
			})
		}, {
			noTrailing: true
		}),
		// 本地生活 店铺支付 
		storePay: throttle(2000, async (e) => {
			thro.payMode = false

			if (thro.payList[thro.payIndex].payway == 3 && !e) {
				thro.payPassword = ""
				thro.pay_password = true
				return
			}
			console.log(thro.payModeList)
			console.log(thro.payModeIndex)
			let form = {
				orderNo: thro.detail.orderNo,
				payway: thro.payList[thro.payIndex].payway,
				remark: thro.notes,
			}

			if (e) {
				form.payPassword = thro.payPassword
			}

			const res = await thro.$Api.index.orderPay(form)

			if (thro.payList[thro.payIndex].payway == 1 || thro.payList[thro.payIndex].payway == 0) {
				const pay = await thro.$pay.WeChatPay(res)
			}

			if (thro.payList[thro.payIndex].payway == 2) {
				const pay = await thro.$pay.Alipay(res.data)
			}

			// if (thro.detail.orderSpuList[0].spuInfo.columnType == 3 && thro.payModeList[thro.payModeIndex]
			// 	.payway == 2) {
			// 	thro.redEnvelopeShow = true
			// }

			thro.$modal.msg('支付成功!')
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
				thro.getDetail()
				if (thro.detail.orderSpuList[0].spuInfo.columnType != 3) {
					uni.switchTab({
						url: '/pages/personalCenter'
					})
				}
			}, 2000)
		}, {
			noTrailing: true
		}),
		getAppPay: throttle(2000, async () => {
			if (!thro.address) {
				uni.$u.toast('请添加收货地址')
				return false
			}

			if (!thro.payList[thro.payIndex].show) {
				uni.$u.toast('请选择支付方式!')
				return false
			}

			// 银行卡支付
			if (thro.payList[thro.payIndex].payway == 9) {
				if (!thro.paymentUrl) {
					thro.$modal.msg('请上传支付凭证!')
					return
				}
				const res = await thro.$Api.index.orderPay({
					orderNo: thro.detail.orderNo,
					payway: 9,
					bankId: thro.bankInfo.id,
					voucher: thro.paymentUrl,
					remark: thro.notes || ""
				})
				thro.$modal.msg('请等待后台确认!')
				setTimeout(() => {
					thro.getDetail()
				}, 1500)
				return
			}


			// if (thro.detail.orderSpuList[0].spuInfo.columnType == 3) {
			// 	let payText = thro.payList[thro.payIndex].payway == 3 ? '余额' : '现金'
			// 	thro.payModeList = [{
			// 		name: `省(支付${thro.payAmountInfo.cashPayAmountInfo.sheng.cashAmount}${payText}+${thro.payAmountInfo.cashPayAmountInfo.sheng.xiaofeijinAmount}消费金)`,
			// 		payway: 1
			// 	}, {
			// 		name: `赚(支付${thro.payAmountInfo.cashPayAmountInfo.zhuan.cashAmount}${payText}+${thro.payAmountInfo.cashPayAmountInfo.zhuan.xiaofeijinAmount}消费金)，得${thro.payAmountInfo.cashPayAmountInfo.zhuan.jinjifen}金积分`,
			// 		payway: 2
			// 	}]

			// 	thro.payMode = true
			// 	return
			// }

			if (thro.payList[thro.payIndex].payType == 3) {
				thro.payPassword = ""
				thro.pay_password = true
				return
			}
			if (thro.payList[thro.payIndex].payType == 5) {
				console.log("予集支付")
				// #ifdef H5
				if (thro.$wechat.isWeixin) {
					thro.h5Pay();
				} else {
					uni.$u.toast('请在微信中打开')
				}
				// #endif
				// #ifdef APP-PLUS
				thro.yujiAppPay();
				// #endif
				// #ifdef MP
				thro.miniPay();
				// #endif

				// thro.payPassword = ""
				// thro.pay_password = true
				// return
			}

			// 现金支付
			const res = await thro.$Api.index.orderPay({
				orderNo: thro.detail.orderNo,
				payway: thro.payList[thro.payIndex].payway,
				remark: thro.notes
			})

			if (thro.payList[thro.payIndex].payType == 0 || thro.payList[thro.payIndex].payType == 1) {
				const pay = await thro.$pay.WeChatPay(res)
			}

			if (thro.payList[thro.payIndex].payType == 2) {
				const pay = await thro.$pay.Alipay(res.data)
			}

			thro.$modal.msg('支付成功!')
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
				thro.getDetail()
				if (thro.detail.orderSpuList[0].spuInfo.columnType != 3) {
					uni.switchTab({
						url: '/pages/personalCenter'
					})
				}
			}, 2000)
		}, {
			noTrailing: true
		}),
		//h5调用予集支付
		h5Pay() {
			// orderPayType(thro.orderNo, thro.payType).then((res) => { });
			let shop_code = this.detail.yujiId;
			let order_id = thro.orderNo;
			let ledgerRateStr = this.detail.ledger ? "&distRatio=" + this.detail.ledgerRate : ''
			let url = `https://dc.yjmt191314.com/api/agent/pay.yj?shop_code=${shop_code}&money=${this.detail.totalPrice}&jg_order_id=${this.orderNo}${ledgerRateStr}`;
			location.href = url;
		},
		//APP调用予集支付
		yujiAppPay() {
			// orderPayType(thro.detail.orderNo, this.payType).then((res) => {});
			let shop_code = this.detail.yujiId;
			let order_id = thro.orderNo;
			let ledgerRateStr = this.detail.ledger ? "&distRatio=" + this.detail.ledgerRate : ''
			let text = `https://dc.yjmt191314.com/api/agent/pay.yj?shop_code=${shop_code}&money=${this.detail.totalPrice}&jg_order_id=${this.orderNo}${ledgerRateStr}`;
			plus.share.getServices(
				(res) => {
					let sweixin = null;
					sweixin = res.find((i) => i.id === "weixin");
					if (sweixin) {
						// 分享跳转到微信小程序
						sweixin.launchMiniProgram({
							id: "gh_553e492fab19", // 固定参数值
							path: `/pages/v5/offline_pay/pay?q=${text}&order_id=${order_id}&shop_code=${shop_code}`,
							type: 0, //     微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						});
					} else {
						uni.showToast({
							title: "请安装微信",
							icon: "none",
						});
					}
				},
				(err) => {
					console.log("分享失败"); // 获取分享服务列表失败
				}
			);
		},
		// 小程序调用予集支付
		miniPay() {
			// orderPayType(this.orderNo, this.payType).then((res) => { });
			let shop_code = "5908591731635207684490";
			let order_id = thro.orderNo;
			let ledgerRateStr = this.detail.ledger ? "&distRatio=" + this.detail.ledgerRate : ''
			uni.openEmbeddedMiniProgram({
				appId: "wxa7aefffb11d14e80", //固定参数值
				path: `/pages/v5/offline_pay/pay`, //固定参数值
				extraData: {
					q: `https://dc.yjmt191314.com/api/agent/pay.yj?shop_code=${shop_code}&money=${this.detail.totalPrice}&jg_order_id=${this.orderNo}${ledgerRateStr}`, //参数值示例如下
					order_id: order_id, //参数值示例如下 cp370254064362587037
				},
				success() {
					console.log("打开半屏小程序");
				},
				fail(err) {
					console.log("跳转小程序失败", err);
					uni.hideLoading();
				},
			});
		},
		handleRedClose() {
			thro.redEnvelopeAnimation = true
			setTimeout(() => {
				thro.redEnvelopeShow = false
				thro.redEnvelopeEndShow = true
				thro.redEnvelopeAnimation = false
				setTimeout(() => {
					thro.redEnvelopeEndShow = false
					uni.switchTab({
						url: '/pages/personalCenter'
					})
				}, 1500)
			}, 2000)
			return
			if (thro.redEnvalopeIndex == 1) {
				thro.redEnvelopeAnimation = true
				setTimeout(() => {
					thro.redEnvelopeShow = false
					thro.redEnvelopeEndShow = true
					thro.redEnvelopeAnimation = false
					thro.redEnvalopeIndex = 2
					setTimeout(() => {
						thro.redEnvelopeEndShow = false
						thro.redEnvelopeShow = true
					}, 1500)
				}, 2000)
			} else {
				thro.redEnvelopeAnimation = true
				setTimeout(() => {
					thro.redEnvelopeShow = false
					thro.redEnvelopeEndShow = true
					thro.redEnvelopeAnimation = false
					setTimeout(() => {
						thro.redEnvelopeEndShow = false
						uni.switchTab({
							url: '/pages/personalCenter'
						})
					}, 1500)
				}, 2000)
			}
		},
		confirmOrder: throttle(2000, async () => {
			if (!thro.payPassword || thro.payPassword == "") {
				thro.$modal.msg('请输入支付密码!')
				return
			}

			if (thro.detail.orderSpuList[0].spuInfo.columnType == 3) {
				thro.storePay(true)
				return
			}
			// 货币支付
			const res = await thro.$Api.index.orderPay({
				orderNo: thro.detail.orderNo,
				payway: thro.payList[thro.payIndex].payway,
				payPassword: thro.payPassword,
				remark: thro.notes
			})
			thro.$modal.msg('支付成功!')
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
				thro.getDetail()
				if (thro.detail.orderSpuList[0].spuInfo.columnType != 3) {
					uni.switchTab({
						url: '/pages/personalCenter'
					})
				}
			}, 2000)
		}),
		order_Edit: throttle(2000, () => {
			thro.$Api.index.orderFinished({
				orderNo: thro.id
			}).then(() => {
				uni.$u.toast('收获成功!')
				setTimeout(() => {
					thro.getDetail()
				}, 1500)
			})
		}, {
			noTrailing: true
		}),
		copy(data) {
			uni.setClipboardData({
				data,
				success: () => {
					console.log('success');
					thro.$modal.msg('复制成功!')
				}
			});
		},
		changePayment(index) {
			thro.payIndex = index
		},
		changeAddress() {
			if (!thro.isStore && thro.detail.state == 0) {
				thro.$tab.nav(`/pages/mine/address/list?type=1`)
			}
		},
		handleFindPayListIndex(name) {
			return thro.payList.findIndex(item => {
				return item.name == name
			})
		},
		async getDetail() {
			const res = await thro.$Api.index.productOrdersDetail(thro.id)
			console.log(res, '订单详情')
			thro.payAmountInfo = res.payAmountInfo
			thro.detail = res.data
			let columnType = thro.detail.orderSpuList[0].spuInfo.columnType
			if (thro.detail.state == 5 && thro.detail.writeOffQrCode && !thro.isStore) {
				this.hexiaoShow = true
			}
			if (thro.detail.yujiId == null || thro.detail.yujiId == "") {
				thro.payList[thro.handleFindPayListIndex('予集支付')].show = false
			}
			switch (columnType) {
				case 1:
					thro.payList[thro.handleFindPayListIndex('银行卡支付')].show = true
					thro.payList[thro.handleFindPayListIndex('余额+消费金+微信〔需支付10%现金手续费〕')].show = true
					thro.payList[thro.handleFindPayListIndex('余额+消费金+支付宝〔需支付10%现金手续费〕')].show = true
					break;
				case 2:
					thro.payList[thro.handleFindPayListIndex('银行卡支付')].show = true
					thro.payList[thro.handleFindPayListIndex('余额+消费金+微信〔需支付10%现金手续费〕')].show = true
					thro.payList[thro.handleFindPayListIndex('余额+消费金+支付宝〔需支付10%现金手续费〕')].show = true
					break;
				case 3:
					if (thro.detail.orderSpuList[0].storeInfo.openBalancePay == 1) {
						if (thro.handleFindPayListIndex('余额+消费金') != -1) {
							thro.payList[thro.handleFindPayListIndex('余额+消费金')].show = true
						}
					}
					if (thro.detail.orderSpuList[0].storeInfo.openShangdouPay == 1) {
						thro.payList[thro.handleFindPayListIndex('熵豆')].show = true
					}
					break;
				case 5:
					if (thro.detail.orderSpuList[0].storeInfo.openBalancePay == 1) {
						if (thro.handleFindPayListIndex('余额+消费金') != -1) {
							thro.payList[thro.handleFindPayListIndex('余额+消费金')].show = true
						}
					}
					thro.payList[thro.handleFindPayListIndex('熵豆')].show = true
					break;
				case 4:
					thro.payList[thro.handleFindPayListIndex('银行卡支付')].show = true
					thro.payList[thro.handleFindPayListIndex('余额+消费金+微信〔需支付10%现金手续费〕')].show = true
					thro.payList[thro.handleFindPayListIndex('余额+消费金+支付宝〔需支付10%现金手续费〕')].show = true
					break;
				case 6:
					thro.payList[thro.handleFindPayListIndex('微信+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('支付宝+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('熵豆')].show = true
					// if (thro.detail.orderSpuList[0].spuInfo.payType == 1) {

					// } else {
					// 	thro.payList[thro.handleFindPayListIndex('功德金')].show = true
					// }
					break;
				case 7:
					thro.payList[thro.handleFindPayListIndex('微信+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('支付宝+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('金豆+消费金')].show = true
					break;
				case 8:
					break;
				case 10:
					thro.payList[thro.handleFindPayListIndex('余额+消费金')].show = true
					break;
				case 11:
					thro.payList[thro.handleFindPayListIndex('微信+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('支付宝+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('金豆+消费金')].show = true
					break;
				case 12:
					break;
				case 13:
					thro.payList[thro.handleFindPayListIndex('微信+消费金')].show = false
					thro.payList[thro.handleFindPayListIndex('支付宝+消费金')].show = false
					let index = thro.handleFindPayListIndex('微信+熵豆')
					let index2 = thro.handleFindPayListIndex('支付宝+熵豆')
					// let index3 = thro.handleFindPayListIndex('余额+熵豆')
					let index4 = thro.handleFindPayListIndex('余额+支付宝+熵豆')
					console.log("🚀🚀🚀 ~ getDetail2222222222222222222 ~ index4:", index4)
					thro.payList[index].name =
						`微信(${res.shangdouPayInfo.cash})+熵豆(${res.shangdouPayInfo.shangdou})`
					thro.payList[index2].name =
						`支付宝(${res.shangdouPayInfo.cash})+熵豆(${res.shangdouPayInfo.shangdou})`
					// thro.payList[index3].name =
					// 	`余额(${res.shangdouPayInfo.cash})+熵豆(${res.shangdouPayInfo.shangdou})`
					thro.payList[index4].name =
						`余额(${res.shangdouBalancePayInfo.balance})+支付宝(${res.shangdouBalancePayInfo.cash})+熵豆(${res.shangdouPayInfo.shangdou})`
					thro.payList[index].show = true
					thro.payList[index2].show = true
					// thro.payList[index3].show = true
					thro.payList[index4].show = true
					break;
			}
			if (columnType == 12 || columnType == 8) {
				thro.payList[thro.handleFindPayListIndex('余额+微信+消费金')].show = true
				thro.payList[thro.handleFindPayListIndex('余额+支付宝+消费金')].show = true
			}
			// 判断是否只可现金支付
			if (thro.detail.orderSpuList[0].spuInfo.cashPay == 1) {
				thro.payList[thro.handleFindPayListIndex('余额+微信+消费金')].show = false
				thro.payList[thro.handleFindPayListIndex('余额+支付宝+消费金')].show = false
			}

			if (columnType == 3 || columnType == 5) {
				thro.payList.forEach(item => {
					item.name = item.name.replace('+消费金', '')
				})
			}


			thro.address = res.data.mallAddress
			// 备注
			thro.notes = thro.detail.remark
		},
		onChange(e) {
			thro.timeData = e
			if (e.days == 0 && e.hours == 0 && e.milliseconds == 0 && e.minutes == 0 && e.seconds == 0) {
				thro.getDetail()
			}
		},
		async getData() {
			const res = await thro.$Api.user.getAdminBank()
			thro.bankInfo = res.data
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
	font-size: 36rpx;
}

.remittanceInfo {
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	padding: 24rpx;
}

.pay-li {
	padding: 32rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.pay-li-left {
		display: flex;
		align-items: center;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-right: 14rpx;
		}

		.pay-li-left-ftitle {
			color: #BEBEBE;
			font-size: 20rpx;
			margin-top: 8rpx;
		}
	}

	.pay-li-right {
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 50%;

		.pay-li-right-nei {
			width: 16rpx;
			height: 16rpx;
			background: linear-gradient(90deg, #92D982 0%, #8EE88A 49%, #F4F36E 100%);
			border-radius: 50%;
		}
	}
}

.redEnvelope-wrap {
	width: 628rpx;
	height: 880rpx;
	background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_hongbao@2x.png) no-repeat;
	background-size: 100% 100%;
	padding: 116rpx 0 22rpx 0;
	color: #E9CA9A;
	animation: fadeIn 1.5s forwards;

	.redEnvelope-price {
		font-size: 100rpx;
		font-weight: 700;
		margin-top: 78rpx;
	}

	.kai {
		width: 148rpx;
		height: 148rpx;
		position: absolute;
		left: calc(50% - 74rpx);
		bottom: 158rpx;
	}

	.kai-animation {
		animation: float 2s forwards;
		transform-style: preserve-3d;
	}
}

.redEnvelope-wrap-end {
	width: 750rpx;
	height: 750rpx;
	background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_linquchenggong@3x.png) no-repeat;
	background-size: 100% 100%;
}

@keyframes float {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
	}
}

/* 定义关键帧 */
@keyframes fadeIn {
	from {
		right: -72rpx;
	}

	to {
		right: 0rpx;
	}
}


.confirm-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 172rpx;
	justify-content: flex-end;
}

.select-box {
	width: 40rpx;
	height: 40rpx;
	border: 2px solid #DCDCDC;
	border-radius: 50%;
	box-sizing: border-box;
}

.selected {
	background-color: #E2382B;
	border: none;
}

.but {
	width: 192rpx;
	height: 60rpx;
	border-radius: 4px;
	border: 1px solid #E7E7E7;
	color: #666;
	text-align: center;
	line-height: 60rpx;
	margin-right: 16rpx;
}

.nav {
	height: 180rpx;
	background: linear-gradient(180deg, #FFDDDB 0%, #FFFFFF 100%);
}
</style>